<template>
  <div
    id="buttom_class"
    style="
      display: flex;
      height: 15px;
      background-color: #dddddd;
      color: red;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    "
  >
    本系统仅供内部使用！
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from "vue";
const bus = getCurrentInstance().appContext.config.globalProperties.$bus;

const setHeight = () => {
  const bottomDiv = document.querySelector("#buttom_class");
  const viewportHeight = window.innerHeight;
  const bodyHeight = document.body.clientHeight;
  const i = bottomDiv.style.height.indexOf("p");
  if (viewportHeight > bodyHeight) {
    const remainingHeight = viewportHeight - bodyHeight;
    const nowHeight =
      remainingHeight + Number(bottomDiv.style.height.substring(0, i));
    bottomDiv.style.height = nowHeight + "px";
  }
};

onMounted(() => {
  setHeight();
});
</script>

<style></style>
